<script setup lang="ts">
import { RouterLink } from 'vue-router';

const routerData = [
    {
        path: "/",
        title: "智能检测",
        img: "/src/assets/智能检测.jpg",
        activeImg: "/src/assets/智能检测-active.jpg",
        isActived: false,
    },
    {
        path: "/employment",
        title: "就业态势",
        img: "/src/assets/就业态势.jpg",
        activeImg: "/src/assets/就业态势-active.jpg",
        isActived: false,
    },
    {
        path: "/safety",
        title: "安防管理",
        img: "/src/assets/安防管理.jpg",
        activeImg: "/src/assets/安防管理-active.jpg",
        isActived: true,
    },
    {
        path: "/equipment",
        title: "设备运维",
        img: "/src/assets/设备运维.jpg",
        activeImg: "/src/assets/设备运维-active.jpg",
        isActived: false,
    },
];
</script>

<template>
    <div class="btm-container">
        <div class="router-link">
            <RouterLink v-for="(item, index) in routerData" :key="index" :to="item.path">
                <div class="router-box">
                    <img :src="item.isActived ? item.activeImg : item.img" alt="">
                    <span>{{ item.title }}</span>
                </div>
            </RouterLink>
        </div>
    </div>
</template>

<style scoped lang="scss">
.btm-container {
    width: 35%;
    height: 10%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-image: url(../../assets/菜单栏.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .router-link {
        width: 40%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .router-box {
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 12px;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;

            >img {
                width: 80%;
                height: 80%;
            }
        }
    }
}
</style>